<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue1</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <button @click="show = !show">Toggle</button>
            <transition 
                v-on:before-enter="beforeEnter"
                v-on:enter="enter"
                v-on:leave="leave"
                v-bind:css="false"
            >
                <p v-if="show">Demo</p>            
            </transition>
        </div>
        <script>
            let vue = new Vue({
        // 告诉vue的实例对象，将来需要控制界面上的那个区域
                el:'#app',
                data:{
                    name:"内容1",
                    show:false
                },
                methods: {
                    beforeEnter:function(el){
                        el.style.opacity = 0
                        el.style.transformOrigin = 'left'
                    },
                    enter: function(el){
                        Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
                        Velocity(el, { fontSize: '1em' }, { complete: done })
                    },
                    leave: function (el, done) {
                        Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
                        Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
                        Velocity(el, {
                            rotateZ: '45deg',
                            translateY: '30px',
                            translateX: '30px',
                            opacity: 0
                        }, { complete: done })
                    }

                },
            });
        </script>
    </body>
</html>